<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Graphics Lines Test | TM Lib</title>
        
        <style>
            body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; }
        </style>
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script>
            
            TM.loadScript("graphics", "graphics");
            TM.loadScript("input", "mouse");
            
            /**
             * main
             */
            TM.main(function()
            {
                var g = TM.Graphics.Graphics(TM.$id("c"));
                var m = TM.$Mouse(g.canvas);
                m.run();
                
                var points = [];
                
                g.lineWidth = 4;
                
                var update = function() {
                    g.lineWidth = TM.$id("lineWidth").value;
                    g.lineCap   = TM.$id("lineCap").value;
                    g.lineJoin  = TM.$id("lineJoin").value;
                    
                    if (m.getButtonDown(TM.Input.Mouse.BUTTON_LEFT)) {
                        points.push(m.x);
                        points.push(m.y);
                    }
                };
                
                var draw = function() {
                    var drawFuncName = TM.$id("drawType").value + "Lines";
                    
                    // 描画
                    g.clear();
                    
                    g.save();
                    
                    g[drawFuncName].apply(g, points);
                    // g.strokeLines.apply(g, points);
                    
                    for (var i=0,len=points.length/2; i<len; ++i) {
                        g.fillCircle(points[i*2], points[i*2+1], 5);
                    }
                    
                    g.restore();
                };
                
                TM.setLoop(function(){
                    update();
                    draw();
                }, 1000/30);
                
                var rangeList = TM.$queryAll("input[type=range]");
                for (var i=0,len=rangeList.length; i<len; ++i) {
                    rangeList[i].addEventListener("change", draw);
                }
                
                TM.$id("clear").addEventListener("click", function(){
                    points = [];
                    draw();
                });
                TM.$id("save").addEventListener("click", function(){
                    g.saveAsImage();
                });
            });
            
        </script>

    </head>
    
    <body>
        <div id="wrapper">
            
            <h1>Graphics Lines Test | TM Lib</h1>
            
            <canvas id="c" title="star" width=512 height=512 style="border:1px solid black;"></canvas>
            <table border=1>
                <tr>
                    <th><label for="drawType">drawType :</label></th>
                    <td>
                        <select id="drawType">
                            <option>stroke</option>
                            <option>fill</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><label for="lineWidth">lineWidth :</label></th>
                    <td><input type="range" id="lineWidth" value="1" min="1" max="20" /></td>
                </tr>
                <tr>
                    <th><label for="lineCap">lineCap :</label></th>
                    <td>
                        <select id="lineCap">
                            <option>butt</option>
                            <option>round</option>
                            <option>square</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><label for="lineJoin">lineJoin :</label></th>
                    <td>
                        <select id="lineJoin">
                            <option>bevel</option>
                            <option>round</option>
                            <option>miter</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button id="clear">Clear</button>
                        <button id="save">Save</button>
                    </td>
                </tr>
            </table>
            
        </div>
    </body>
</html>